<template>
    <div class="main">
        <div class="main-up">
            <div class="headNav">
                <h2>书城</h2>
                <van-search v-model="value"  shape="round" placeholder="请输入搜索关键词" />
            </div>
            <div>
                <button class="btn" :class="{ active: isActiveButton === 'button1' }" @click="changeButtonStyle('button1')">男生</button>
                <button class="btn" :class="{ active: isActiveButton === 'button2' }" @click="changeButtonStyle('button2')" >女生</button>
                <button class="btn" :class="{ active: isActiveButton === 'button3' }" @click="changeButtonStyle('button3')" >动漫</button>
            </div>
            
        </div>
        
    </div>
</template>

<script>
    export default {
        data() {
            return {
                value: '',
                isActiveButton: null,
            };
        },
        methods: {
            changeButtonStyle(button) {
                if (this.isActiveButton === button) {
                    this.isActiveButton = null; // 点击相同按钮时，恢复默认样式
                } else {
                    this.isActiveButton = button; // 点击不同按钮时，改变样式
                }
            },
            // changeRouter1(){
            //     this.$router.push('city_boys');
            // },
            // changeRouter2(){
            //     this.$router.push('city_girls');
            // },
            // changeRouter3(){
            //     this.$router.push('city_cartoon');
            // }
        }
       
    };
</script>

<style lang="scss" scoped>
.main{
    background-color: #F2F2F2;
    width: 100%;
    height: 100%;
}
.main-up{
    background-color: white;
}
.headNav>h2{
    margin: 10px;
    float: left;
}
.btn{
    margin:10px;
    width: 50px;
    border-radius:10px;
    border:none;
    background-color: white;
    color: #ccc;
}

.active {
  background-color: rgba(43, 178, 131, 1);
  color: white;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 100px;
    text-align: center;
    background-color: #39a9ed;
    border-radius:10px;
}
.grid-img{
    margin-top: 10px;
    width: 38px;
    height: 38px;
    z-index: 0;
}
.grid{
    font-size: 14px;
    margin: 5px;
    color:#666
}
.grid-icon{
    width: 17px;
    height: 18px;
}
</style>